<template>
	<view class="p_c">
		<div class="tab" v-if="activityData.settings && activityData.settings.prize_open">
			<div :class="{'tab-select':tabSelect==1}" @click="changeTab(1)">求签记录</div>
			<div :class="{'tab-select':tabSelect==2}" @click="changeTab(2)">我的奖品</div>
		</div>
		<view v-if="tabSelect==1" class="fadeIn_an">
			<view class="draw_list" v-if="lotsList.length>0">
				<view class="draw_item" v-for="item in lotsList">
					<view class="image">
						<img class="draw" :src="item.image"></img>
						<img class="view_draw" @click="viewDetail(item)" src="../../../static/drawlots/view_draw.png" alt="">
					</view>
					<view class="content">
						<view class="title">{{item.name}}</view>
						<view class="nums">累计拥有{{item.num}}个</view>
						<view class="start">
							<view>运势指数</view>
							<uni-rate :value="(item.fortune/10)" :size="18" color="#bbb" active-color="#F74735" :allowHalf="true" />
						</view>
					</view>
				</view>
			</view>
			<view class="no-lots" v-else>
				还没有求到签哦~
			</view>
		</view>
		<view v-if="tabSelect==2" class="fadeIn_an">
			<view class="chance" v-if="chanceData.lottery>0">
				剩余<span>{{chanceData.lottery}}</span>次抽奖机会 <span @click="openLott">去参与</span>
			</view>
			<view class="login_box" v-if="pageStatus!=4">
				<img :src="imgUrl" />
				<view v-if="pageStatus==1" class="text">
					<span>查看奖励</span><br/>
					<span>需先绑定<span style="color: #4379A8;" @click="login(1)">微信</span></span>
				</view>
				<view  v-if="pageStatus==2" class="text">
					<span>还未登录哦</span><br/>
					<span>请先<span style="color: #4379A8;" @click="login(2)">登录</span></span>
				</view>
				<view  v-if="pageStatus==3" class="text">
					<span>还没有中奖哦</span><br/>
					<span>搓搓手掌，继续加油</span>
				</view>
			</view>
			<view class="prize_list" v-if="pageStatus==4">
				<view v-for="data in listData">
					<div class="menuCell" v-if="data.ids.length>1" @click="openMoreCell(data)">
						<view class="more">
							<view class="num" v-if="data.nums!=1">{{data.nums}}</view>
							<img :src="formatImage(data.prize)" />
						</view>
						<span>{{data.prize.title}}</span>
						<img class="icon" v-if="data.show" src="@/static/guess/arrow-up.png" />
						<img class="icon" v-else src="@/static/guess/arrow-down.png" />
					</div>
					<view class="prize_item" v-else @click="openDetail(data)">
						<view class="imgBox">
							<view class="num" v-if="false && data.nums!=1">{{data.nums}}</view>
							<view class="one" v-if="data.nums==1 || !data.hasOwnProperty('nums')">
								<img :src="formatImage(data.prize)" />
							</view>
							
						</view>
						<view class="dec">
							<span>{{data.prize.title}}</span>
							<span>{{data.dec}}领奖时间:{{formattime(data.prize.accept_start)}}-{{formattime(data.prize.accept_expire)}}</span>
						</view>
						<span v-if="data.status==0" class="status suc">去兑换</span>
						<span v-if="data.status==1" class="status fail">已兑换</span>
						<span v-if="data.status==2" class="status invalid">已过期</span>
						<span v-if="data.status==3" class="status invalid">未到期</span>
					</view>
					<view v-if="data.show"  v-for="item in data.ids" >
						<view class="prize_item" v-if="item.prize" @click="openDetail(item)">
							<view class="imgBox">
								<view class="num" v-if="false && item.nums!=1">{{item.nums}}</view>
								<view class="one" >
									<img :src="formatImage(item.prize)" />
								</view>
							</view>
							<view class="dec">
								<span>{{item.prize.title}}</span>
								<span>{{item.dec}}领奖时间:{{formattime(item.prize.accept_start)}}-{{formattime(item.prize.accept_expire)}}</span>
							</view>
							<span v-if="item.status==0" class="status suc">去兑换</span>
							<span v-if="item.status==1" class="status fail">已兑换</span>
							<span v-if="item.status==2" class="status invalid">已过期</span>
							<span v-if="item.status==3" class="status invalid">未到期</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="modal_rule fadeIn_an"  @touchmove.prevent v-if="modal">
			<lotsDetail :data="modalData" :isNeglect="false" @close="closeModal" @share="openShare"></lotsDetail>
			<img class="close" @click="closeModal" src="../../../static/guess/close.png" alt=""/>
		</view>
		<drawLotsPrize ref="drawLotsPrize" :chance="chance" @finish="prizeBack"></drawLotsPrize>
		<share v-if="showShare" :data="shareData" @close="closeShare"></share>
	</view>
</template>

<script>
	import {LoginApp,checkLogin,isQianfan,checkImage,proxyShareFun} from '@/until/QFH5.js'
	import {prizeList,appLogin,getLotsList,chance} from '@/api/api.js'
	import {mapGetters} from 'vuex'
	import {formatTime} from '@/until/tool.js'
	import lotsDetail from './lotsDetail.vue'
	export default{
		components:{lotsDetail},
		computed:{
			...mapGetters({qiniuUrl:'qiniuUrl',guide:'guide'}),
			imgUrl(){
				switch(this.pageStatus){
					case 1: return this.qiniuUrl+'prize_connect.png'
					case 2: return this.qiniuUrl+'prize_login.png'
					case 3: return this.qiniuUrl+'prize_data.png'
				}
			}
		},
		data(){
			return{
				listData:[{status:1},{status:1},{status:2},{status:3},{status:1},{status:1}],
				pageStatus:4,
				actid:1,
				tabSelect:1,
				lotsList:[],
				chanceData:{},
				chance:0,
				modal:false,
				modalData:{},
				activityData:{},
				showShare:false,
				shareData:{settings:{poster:'',poster_img:""}}
			}
		},
		methods:{
			openShare(){
				let lotsData = this.modalData
				let data = this.activityData
				let url = window.location.origin+'/plugin-view/?type=drawlots&plugin=drawlots&id='+this.actid
				proxyShareFun(lotsData.name, lotsData.image, data.settings.desc, url)
				this.modal = false
				this.showShare = true
			},
			closeShare(){
				this.showShare=false
				this.setShare()
			},
			viewDetail(val){
				this.modalData = val
				this.modal = true
			},
			closeModal(){
				this.modal  = false
			},
			openLott(){
				// this.initWorksChance()
				this.$refs.drawLotsPrize.openLott()
			},
			prizeBack(){
				this.initWorksChance()
				this.init()
			},
			changeTab(val){
				this.tabSelect = val
				// this.initData()
				if(this.tabSelect==1){
					this.initLots()
				}else{
					this.init()
				}
			},
			openMoreCell(val){
				val.show = !val.show
			},
			formattime(val){
				return formatTime(val,"YYYY-MM-DD")
			},
			formatImage(data){
				return checkImage(data.type,data.image)
			},
			//1微信 2登录
			login(val){
				if(val==1){
					QFH5.jumpBindThirdPlatform(3,function(){
						location.reload()
					})
				}else if(val==2){
					LoginApp()
				}
			},
			openDetail(val){
					let url = '/plugin/pages/drawlots/prizeInfo?pid='+val.id
					// #ifdef MP-WEIXIN
					url = '/prizeInfo?pid='+val.id
					// #endif
					this.$navigateTo({ url: url})
			},
			init(){
				prizeList({actid:this.actid},'drawlots').then(res=>{
					uni.hideLoading()
					this.initWorksChance()
					if(res.code==0){
						if(res.data.result==0){
							this.pageStatus = 3
						}else{
							let data = res.data.result
							data.forEach((item,index)=>{
								item.nums=1
								let num = 0, index1,id = []
								for(index1 =0 ; index1 < data.length ; index1++){
									let item1 = data[index1]
									if(index1>index && item1.prize_id == item.prize_id){
										id.push(item1)
										data.splice(index1,1)
										num +=1
										index1--;
									}
								}
								item.ids = [item,...id]
								item.show = false
								if(num>0)
									item.nums = num+1
							})
							this.listData = data
							console.log(data)
						}
					}
				})
			},
			initWorksChance(){
				chance({actid:this.actid}).then(res=>{
					this.chanceData = res.data
					this.chance = res.data.lottery
				})
			},
			initLots(){
				getLotsList({actid:this.actid,plugin:'drawlots'}).then(res=>{
					if(res.code==0){
						this.lotsList = res.data.list
					}
				})
			},
			initActivityData(){
				ActivityInfo({actid: this.actid}).then(res=>{
					uni.setStorageSync(this.actid+'ActivityData',JSON.stringify(res.data))
					this.activityData = res.data
					this.setShare()
				})
			},
			setShare(){
				let data = this.activityData
				let url = window.location.origin+'/plugin-view/?type=drawlots&plugin=drawlots&id='+this.actid
				proxyShareFun(data.settings.title, data.settings.image, data.settings.desc, url)
			}
		},
	    mounted() {
			if(this.tabSelect==1){
				this.initLots()
			}else{
				this.init()
			}
			let data = uni.getStorageSync(this.actid+'ActivityData') || null
			if(!data){
				this.initActivityData()
			}else{
				this.activityData  = JSON.parse(data)
				this.setShare()
			}
			if(this.$route.query.tab){
				this.tabSelect = this.$route.query.tab
			}
			if(this.$route.query.prize){
				this.$refs.drawLotsPrize.openLott()
			}
		},
	    async onShow() {
			this.$setTitle('我的求签')
			let status = await checkLogin(this.actid)
			if(!status){
				this.pageStatus = 2
				return
			}
			uni.showLoading({
				title:'加载中'
			})
			if(isQianfan() && !this.guide.isWechat){
				this.pageStatus = 1
			}else{
				this.init()
			}
		},
		onLoad(op){
			this.actid = op.id
			this.$store.commit('SETACTIVITYNAME', 'drawlots')
			this.$store.commit('SETACTIVITYTYPE', 'drawlots')
		},
	}
</script>

<style lang="scss" scoped>
	.modal_rule{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
		z-index: 99;
		.close{
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			right: 10%;
			top: 8%;
		}
	}
	.no-lots{
		width: 100%;
		height: 150rpx;
		line-height: 150rpx;
		text-align: center;
		color: #999;
	}
	.chance{
		width: 400rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 22rpx auto 0;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
		span:first-child{
			color: #FE7F00;
			margin: 0 4rpx;
		}
		span:nth-child(2){
			color: #3B76FF;
			margin-left: 16rpx;
		}
	}
	.p_c{
		background-color: #F2F2F2;
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		min-height: 100vh;
	}
	.tab{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		padding-top: 0rpx;
		background-color: #fff;
		div{
			position: relative;
			margin: 0 40rpx;
			height: 42rpx;
			line-height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #999;
		}
		.tab-select{
			color: #222 !important;
		}
		.tab-select::after{
			content: "";
			position: absolute;
			left: 50%;
			bottom: -6rpx;
			transform: translateX(-50%);
			width: 60rpx;
			height:6rpx;
			border-radius: 3rpx;
			background-color: #F74735;
		}
	}
 
	.draw_list{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 30rpx 0;
		box-sizing: border-box;
		width: 750rpx;
		
		.draw_item{
			margin: 0 20rpx 30rpx 20rpx;
			width: 345rpx;
			height: 514rpx;
			background: #FFFFFF;;
			border-radius:  20rpx;
			&:nth-child(2n){
				margin-left: 0rpx;
			}
			.image{
				width: 100%;
				height: 346rpx;
				background: #FFF6DB;
				text-align: center;
				border-radius: 20rpx 20rpx 0 0 ;
				position: relative;
				.draw{
					// height: 290rpx;
					// width: auto;
					max-height: 100%;
					max-width: 100%;
					
				}
				.view_draw{
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 149rpx;
					height: 44rpx;
				}
			}
			.content{
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 24rpx;
				.title{
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #222222;
				}
				.nums{
					margin-top: 6rpx;
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.start{
					margin-top: 6rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 42rpx;
					&>view:first-child{
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
	}
	.login_box{
		width: 750rpx;
		height: 90vh;
		img{
			width: 480rpx;
			height: 320rpx;
			margin: 175rpx 135rpx 0;
		}
		.text{
			margin-top: 30rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1rpx;
		}
	}
	.menuCell{
		// width: 710rpx;
		position: relative;
		width: 670rpx;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 20rpx 20rpx;
		box-shadow: 0px 0px 20rpx 1rpx rgba(51, 51, 51, 0.08);
		margin: 10rpx 0;
		background-color: #fff;
		border-radius: 16rpx;
		img{
			width: 100rpx;
			height: 100rpx;
		}
		&>span{
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			margin: 4.5rpx 0;
			line-height: 42rpx;
			white-space: nowrap;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 270rpx;
			margin-left: 18rpx;
		}
		.icon{
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 45rpx;
			right: 30rpx;
		}
		.more{
			position: relative;
			.num{
				text-align: center;
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				border:1rpx solid red;
				background-color: #FF3255;
				border-radius: 50%;
				color: #fff;
				z-index: 4;
			}
		}
	}
	.prize_list{
		width: 710rpx;
		background: #F2F2F2;
		min-height: 100vh;
		padding: 40rpx 20rpx 40rpx;
		.prize_item{
			width: 670rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 1rpx rgba(51, 51, 51, 0.08);
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 24rpx 20rpx;
			// margin-bottom: 30rpx;
			margin-bottom: 10rpx;
			position: relative;
			.imgBox{
				position: relative;
				.num{
					text-align: center;
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: -20rpx;
					top: -20rpx;
					border:1rpx solid red;
					background-color: #FF3255;
					border-radius: 50%;
					color: #fff;
					z-index: 4;
				}
				.more{
					// display: flex;
					position: relative;
					width: 100rpx;
					height: 100rpx;
					overflow: hidden;
					img{
						position: absolute;
						top: 0;
						left: 0;
						&:nth-child(1){
							left: 0;
							z-index: 3;
							
						}
						&:nth-child(2){
							left: 8rpx;
							top: -8rpx;
							// transform: rotate(20deg);
							z-index: 2;
						}
						&:nth-child(3){
							left: 16rpx;
							top: -16rpx;
							// transform: rotate(40deg);
							z-index: 1;
						}
					}
				}
				img{
					width: 100rpx;
					height: 100rpx;
				}
			}
			.dec{
				margin-left: 12rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				span{
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					margin: 4.5rpx 0;
					line-height: 42rpx;
					white-space: nowrap;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 470rpx;
				}
				span:last-child{
					font-size: 22rpx;
					line-height: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					width: 540rpx;
				}
			}
			.status{
				position: absolute;
				right: 0;
				top: 0;
				background: #E6E6E6;
				border-radius: 0px 16rpx 0px 16rpx;
				width: 108rpx;
				height: 52rpx;
				line-height: 52rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
			}
			.suc{
				background: #FF3255;
				color: #fff;
			}
			.fail{
				background: #E6E6E6;
				color: #000;
			}
			.invalid{
				background: #E6E6E6;
				color: #999999;
			}
			
		}
	}
</style>
